<template>
  <div class="attack-step">
    <div class="attack-item" v-for="(value, index) in plays" :key="value">
      <!-- <app-markdown :content="`攻击步骤${index + 1}-${value}`" :typing="typing" @finish="handleFinish" /> -->

      <div class="index">{{ index + 1 }}</div>
      <div class="content">
        <Typewriter :content="value" :typing="typing" is-markdown @finish="handleFinish" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { Typewriter } from 'vue-element-plus-x'
import 'vue-element-plus-x/styles/prism.min.css'

const props = defineProps({
  data: Array,
  typing: Object,
})

const plays = ref([])
const playIndex = ref(0)
onMounted(() => {
  playIndex.value = 0
  plays.value = [props.data[0]]
})

const handleFinish = () => {
  if (plays.value.length < props.data.length) {
    playIndex.value++
    plays.value.push(props.data[playIndex.value])
  }
}
</script>
<style lang="scss" scoped>
.attack-item {
  margin-bottom: 12px;
  display: flex;
}

.index {
  width: 24px;
  height: 24px;
  background-color: #ef4444;
  border-radius: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  margin-top: 3px;
}

.content {
  flex: 1;
  overflow: hidden;
}
</style>
